<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import Link from "../api/Link.js";
import apiurl from "../api/url.js";
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
//引入pinia
import { useUserStore } from "../store/UserStore.js";
const UserStore = useUserStore();
import { tictetdata } from "../store/Ticketdata";
import { storeToRefs } from "pinia";
const tictet = tictetdata();

// 获取结算信息
let server_price = ref(0)
let money = ref(tictet.order_data.price)

const add_server01 = () => {
    console.log(server_value_01.value);
    if (server_value_01.value == true) {
        server_price.value += 65
    } else {
        server_price.value -= 65
    }
}
const add_server02 = () => {
    console.log(server_value_02.value);
    if (server_value_02.value == true) {
        server_price.value += 40
    } else {
        server_price.value -= 40
    }
}

// 订单总价格
let payPrice = computed(() => {
    return server_price.value + money.value + tictet.order_data.fuelPrice
})

// 默认地址
const user_text = ref({
    username: UserStore.username,
    userID: UserStore.userId,
    userphone: UserStore.userphone
})

// 控制弹框打开
const showDialog = ref(false)

const confirm = (k: number) => {
    if (k == 1) {
        console.log();
        showDialog.value = false
    } else {
        showDialog.value = false
    }
}

const createOrder = async () => {
    //发送请求
    //创建订单数据
    let order = {
        userId: UserStore.id,
        rider: user_text.value.username,
        riderNumberId:user_text.value.userID,
        riderPhone: user_text.value.userphone,
        ticketId: tictet.order_data.id,
        payPrice: payPrice.value,
        payState: 0,
        seatNum: tictet.order_data.seatNum,
        type: route.query.ticket_type,
        trainNumber: tictet.order_data.trainNumber,
        seatNum: tictet.order_data.seatNum,
        createDate: tictet.order_data.createDate,
        startTime: tictet.order_data.startTime,
        reachTime: tictet.order_data.reachTime,
        startPlace: tictet.order_data.startPlace,
        endPlace: tictet.order_data.endPlace,
        payTime: null,
        orderState: "待支付",
    }
    console.log(order);
    await Link(apiurl.add, "POST", order)
        .then((ok: any) => {
            console.log(ok)
            // 订单创建成功后，跳转支付页面
            router.push({
                path: '/pay',
                query: {
                    id: ok,
                    time: 500
                }
            })
        })
    // 更新订单信息
    // cartStore.updateNewList()
}
//出行服务选择开关
const server_value_01 = ref(false)
const server_value_02 = ref(false)
</script>

<template>
    <div class="xtx-pay-checkout-page">
        <div class="container">
            <div class="wrapper">
                <!-- 出行信息 -->
                <h3 class="box-title">出行信息</h3>
                <div class="box-body_01">
                    <table class="goods">
                        <div class="goods_01">
                            <div>
                                <p>{{ tictet.order_data.startPlace }}</p>
                                <p>{{ tictet.order_data.startTime }}</p>
                            </div>
                            <div class="time">
                                <p class="weight">耗时{{ tictet.order_data.totalTime }}</p>
                                <p class="icon">————————></p>
                            </div>
                            <div>
                                <p>{{ tictet.order_data.endPlace }}</p>
                                <p>{{ tictet.order_data.reachTime }}</p>
                            </div>
                        </div>
                        <div>
                            <thead class="goods_02">
                                <tr>
                                    <th width="100">{{ tictet.order_data.type }}</th>
                                    <th width="100" v-if="$route.query.ticket_type == '1'">{{
                                        tictet.order_data.boardingGate }}号登机口</th>
                                    <th width="100" v-else>{{ tictet.order_data.boardingGate }}号检票口</th>
                                    <th width="100" v-if="$route.query.ticket_type == '2'">{{
                                        tictet.order_data.trainNumber }}号车厢</th>
                                    <th width="100">{{ tictet.order_data.seatNum }}号座位</th>
                                    <th width="100">退改￥{{ tictet.return_price }}起</th>
                                    <th width="100" v-if="$route.query.ticket_type == '1'">免费托运行李20KG</th>
                                </tr>
                            </thead>
                        </div>

                    </table>
                </div>

                <!-- 用户信息 -->
                <h3 class="box-title">乘车人信息</h3>
                <div class="box-body_02">
                    <div class="usertext">
                        <div class="text">
                            <div class="none" v-if="!user_text.username">您需要先添加乘车人才可提交订单。</div>
                            <ul v-else>
                                <li><span>姓<i />名：</span>{{ user_text.username }}</li>
                                <li><span>身份证：</span>{{ user_text.userID }}</li>
                                <li><span>联系电话：</span>{{ user_text.userphone }}</li>
                            </ul>
                        </div>
                        <div class="action">
                            <el-button size="large" @click="showDialog = true">切换乘车人</el-button>
                        </div>
                    </div>
                </div>

                <!-- 支付方式 -->
                <h3 class="box-title">出行服务</h3>
                <div class="box-body_03">
                    <div class="server">
                        <div class="server_1">
                            <div>
                                <a>退改无忧险 +￥65/份</a>
                                <el-switch v-model="server_value_01" class="ml-1" @change="add_server01"
                                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #999" />
                            </div>
                            <div class="server_01">
                                <div>
                                    <div>退票保障</div>
                                    <div>节省50退票手续费</div>
                                </div>

                                <div>
                                    <div>改签保障</div>
                                    <div>节省50改签手续费</div>
                                </div>
                            </div>
                        </div>

                        <div class="server_1">
                            <div>
                                <a>交通意外组合险 +￥40/份</a>
                                <el-switch v-model="server_value_02" class="ml-2" @change="add_server02"
                                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #999" />
                            </div>
                            <div class="server_01">
                                <div>
                                    意外保额￥500万|延误最高理赔￥300|备降理赔￥260
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- 金额明细 -->
                <div>
                    <h3 class="box-title">金额明细</h3>
                </div>
                <div class="box-body_04">
                    <div class="total">
                        <dl>
                            <dt>购票数：</dt>
                            <dd>1张</dd>
                        </dl>
                        <dl>
                            <dt>票总价：</dt>
                            <dd>￥{{ tictet.order_data.price }}</dd>
                        </dl>
                        <dl v-show="$route.query.ticket_type == '1'">
                            <dt>机建燃油：</dt>
                            <dd>¥{{ tictet.order_data.fuelPrice }}</dd>
                        </dl>
                        <dl>
                            <dt>服务费：</dt>
                            <dd>¥{{ server_price }}</dd>
                        </dl>
                        <dl>
                            <dt>应付总额：</dt>
                            <dd>￥{{ payPrice }}</dd>
                        </dl>
                    </div>
                </div>
                <!-- 提交订单 -->
                <div class="submit">
                    <el-button @click="createOrder" type="primary" size="large">提交订单</el-button>
                </div>
            </div>
        </div>
    </div>
    <!-- 切换乘车人 -->
    <el-dialog v-model="showDialog" title="切换乘车人" width="30%" center>
        <div class="textWrapper">
            <div class="text item_01">
                <div>
                    <div><span>姓 名：</span></div>
                    <el-input v-model="user_text.username" style="width: 240px" placeholder="例如：李四" />
                </div>
                <div>
                    <div><span>身份证：</span></div>
                    <el-input v-model="user_text.userID" style="width: 240px" placeholder="请输入大陆身份证号" />
                </div>
                <div>
                    <div><span>联系电话：</span></div>
                    <el-input v-model="user_text.userphone" style="width: 240px" placeholder="请确保能联系到您" />
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="confirm(0)">取消</el-button>
                <el-button type="primary" @click="confirm(1)">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加地址 -->
</template>

<style scoped lang="scss">
.el-dialog__title {
    font-size: 20px;
    padding-left: 0px;
    font-weight: 900;
}

.server {
    display: block;
    height: 350px;

    .server_1 {
        border-bottom: 1px solid black;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 10px;
        height: 180px;
        display: block;

        >a {
            
            padding-left: 100px;
            font-size: 25px;
        }

        .ml-1 {
            margin-left: 690px;
        }

        .ml-2 {
            margin-left: 650px;
        }
    }

    .server_01 {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        margin-top: 30px;

        div {
            margin-left: 50px;
            margin-right: 50px;
            background-color: #fff;
            width: auto;
            text-align: center;
            font-size: 16px;
        }

    }
}

.goods_01 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;

    >div {
        margin-right: 100px;
        margin-left: 100px;
        text-align: center;
    }

    .time {
        // width: 100px;
        margin-right: 50px;
        margin-left: 50px;
    }

    .icon {
        color: #999
    }

    .weight {
        font-size: 12px;
    }
}

.goods_02 {
    width: 100%;
}

.goods {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    height: 50px;
    display: block;

    th {
        background: #409eff66;
        font-size: 14px;
        text-align: center;
        justify-content: center;
        padding: 5px;
        margin-left: 70px;
        margin-right: 70px;
        border-bottom: 1px solid #f5f5f5;
        width: 200px;
        height: 50px;

        &:first-child {
            border-left: 1px solid #633f3f;
        }

        &:last-child {
            border-right: 1px solid #633f3f;
        }
    }
}

.xtx-pay-checkout-page {
    margin-top: 20px;
    padding-left: 150px;
    padding-right: 150px;
    background-color: #999;

    .wrapper {
        background: #fff;
        padding: 0 20px;

        .box-title {
            font-size: 20px;
            font-weight: 400px;
            padding-left: 10px;
            line-height: 70px;
            border-bottom: 2px solid #999;
        }

        .box-body_01 {
            padding: 20px 0;
            height: 200px;
        }

        .box-body_02 {
            padding: 20px 0;
            height: 150px;
        }

        .box-body_03 {
            padding: 20px 0;
            height: 400px;
        }

        .box-body_04 {
            padding: 20px 0;
            height: 220px;
        }
    }
}

.usertext {
    border: 2px solid #0a8468;
    display: flex;
    align-items: center;
    box-shadow: -2px -2px 1px #666666;
    margin-bottom: 20px;

    .text {
        flex: 1;
        min-height: 100px;
        display: flex;
        align-items: center;

        .none {
            line-height: 90px;
            color: #999;
            text-align: center;
            width: 100%;
        }

        >ul {
            flex: 1;
            padding: 20px;

            li {
                line-height: 30px;
                font-size: 20px;
                color: #999;

                span {
                    color: black;
                    margin-right: 5px;

                    >i {
                        width: 0.5em;
                        display: inline-block;
                    }
                }
            }
        }

        >a {
            color: #fff;
            width: 160px;
            text-align: center;
            height: 90px;
            line-height: 90px;
            border-right: 1px solid #f5f5f5;
        }
    }

    .action {
        width: 420px;
        text-align: center;

        .btn {
            width: 140px;
            height: 46px;
            line-height: 44px;
            font-size: 14px;

            &:first-child {
                margin-right: 10px;
            }
        }
    }
}

.total {
    dl {
        display: flex;
        justify-content: flex-end;
        line-height: 50px;

        dt {
            i {
                display: inline-block;
                width: 2em;
            }
        }

        dd {
            width: 240px;
            text-align: right;
            padding-right: 70px;

            &.price {
                font-size: 20px;
                color: #fff;
            }
        }
    }
}

.submit {
    text-align: right;
    padding: 60px;
    border-top: 1px solid #f5f5f5;
}

.textWrapper {
    max-height: 500px;
    overflow-y: auto;
}

.text {
    flex: 1;
    min-height: 180px;
    display: block;
    align-items: center;
    height: 100px;

    >span {
        width: 50px;
    }

    >div {
        margin-bottom: 10px;
    }
}
</style>